import { ref } from "vue";
export function useTogglePicker() {
  const showPicker = ref(false);
  const columns = ref([]);
  
  const imperialColumns = [
    { text: "in", value: "1" },
    { text: "ft", value: "12" },
  ];
  const unitColumns = [
    { text: "cm", value: "1" },
    { text: "m", value: "100" },
    { text: "mm", value: "0.1" },
  ];

  function togglePicker(columnName) {
    showPicker.value = !showPicker.value;
    if (columnName === "metric") {
      columns.value = unitColumns;
    } else {
      columns.value = imperialColumns;
    }
  }

  return {
    showPicker,
    columns,
    togglePicker,
  };
}
